<script setup lang="ts">
import {ref} from 'vue'
import {getTableList} from '@/mock';
// 筛选项信息
const formValue = ref({
  school: '清华',
});
const formTableProps = ref({
  searchForm: {
    searchList: [
      {
        label: '姓名',
        key: 'name',
        type: 'input',
        devAttrs: {
          placeholder: '请输入姓名'
        }
      },
      {
        label: '年龄',
        key: 'age',
        type: 'input',
        devAttrs: {
          placeholder: '请输入年龄'
        }
      }
    ],
    elFormAttrs: {
      labelWidth: '60'
    },
    formValue
  },
  searchTable: {
    columns: [
      {
        label: '基本信息',
        prop: '随便定义一个不重复的prop就行',
        align: 'center',
        columns: [
          {
            label: '姓名',
            prop: 'name',
            width: '200',
            align: 'center',
          },
          {
            label: '年龄',
            prop: 'age',
            minWidth: '400',
            align: 'center',
          }
        ]
      },
      {
        label: '省份',
        prop: 'address',
        fixed: 'right',
        align: 'center',
        width: '300',
        tips: '学生所在的省份',
      }
    ],
    query: formValue,
    api: getTableList,
    elTableAttrs: {
      'scrollbar-always-on': true
    }
  }
});
</script>

<template>
  <dev-form-table
      v-bind="formTableProps"
      ref="devElFormTableRef">
  </dev-form-table>
</template>
